import React, { FC, useState, useEffect } from 'react';
import styles from './cardCover.less';
import { PlayCircleOutlined } from '@ant-design/icons';
import { request, ConnectProps, PlayerModelState, connect } from 'umi';

interface PageProps extends ConnectProps {
  playerModel: PlayerModelState;
  dispatch: any;
}

const CardCover: any = ({ data, imgLabel, type, dispatch }: any) => {
  let getSong = (data: any) => {
    if (type == 'mv') {
      request('/mv/url?id=' + data.id).then((res: any) => {
        window.open(res.data.url);
      });
    } else {
      request('/playlist/detail?id=' + data.id).then((res: any) => {
        let arr: any[] = [];
        res.playlist.trackIds.forEach((item: any) => {
          arr.push(item.id.toString());
        });
        dispatch({
          type: 'playerModel/getSongIdList',
          payload: {
            idList: arr,
          },
        });
      });
    }
  };

  return (
    <div
      className={styles.imgCentent}
      onClick={() => {
        getSong(data);
      }}
    >
      <img className={styles.cardImg} src={data[imgLabel]} />
      <div className={styles.play}>
        <PlayCircleOutlined className={styles.playIcon} />
      </div>
    </div>
  );
};
export default connect(
  ({ playerModel }: { playerModel: PlayerModelState }) => ({ playerModel }),
)(CardCover);
